<template>
	<div class="wraper" :class="{padTop:isIphoneX,iphone:isIphone}">
		<div class="nav-bar">
			<div class="arrow" @click="goBack"></div>
			<div class="center">兑换记录</div>
			<span @click="$router.push('/redexchangehistory')">兑换记录</span>
		</div>
		<div class="content">
			<h1>持有的BTC数量</h1>
			<h2>{{totalBtc}}</h2>
			<div class="item" v-for="item in list" :key="item.id">
				<h3><b>{{item.coupon_amount}}BTC券</b><span>(有效期{{item.expire_date}})</span></h3>
				<p class="changes">
					<span class="reduce" @click="goReduce(item)" :class="{gray:item.min == item.value}"></span>
					<span class="value">{{item.value}}张</span>
					<span class="add" @click="goAdd(item)" :class="{gray:item.max == item.value}"></span>
				</p>
				<p class="desc">消耗：{{(item.value*item.exchange_rate).toFixed(8)}}BTC</p>
				<van-button 
					@click="goExchange(item)" 
					loading-text="加载中..." 
					class="btn" 
					:class="{gray:item.min == item.value}"
					type="primary" 
					color="#FFD633">
					确认兑换
				</van-button>
			</div>
		</div>
	</div>
</template>
<script src="./redExchange.js"></script>
<style scoped lang="scss">
	@import './redExchange.scss';
</style>
<style>
	.redExchange-dialog{
		width: 75%;
	}
	.redExchange-dialog .van-dialog__message--has-title{
		color: #000;
	}
	.redExchange-dialog button{
		height: 40px;
		line-height: 40px;
	}
</style>